<template>
	<view class="container">
		<view class="content" v-for="(item,index) in list" :key="index">
			<view class="left">
				<text :class="item.type==1?'iconfont icon-yinhangka1':item.type==2?'iconfont icon-zhifubao':'iconfont icon-weixin'"></text>
			</view>
			<view class="center">
				<view class="top">
					{{item.name}}
				</view>
				<view class="bottom">
					{{item.account}}
				</view>
			</view>
			<view class="right" @tap.stop="deleteCard(item._id)">
				<text class="iconfont icon-shanchu"></text>
			</view>
		</view>
		<view class="btn">
			<button type="primary" @click="addCard()">新增钱包</button>
		</view>
	</view>
</template>

<script>
	import api from '@/comon/api.js'
	export default{
		data(){
			return{
				list:[]
			}
		},
		onShow() {
			this.loadData()
		},
		methods:{
			async loadData(){
				let userinfo = uni.getStorageSync('userInfos');
				this.list = uni.getStorageSync('obtain_wallet');
				let res = await api.uniCloudApi(api.publicFun.wallet,{user_id:userinfo._id,wallet_type: 1});
				this.list = res;
				uni.setStorageSync('obtain_wallet',res);
			},
			deleteCard(id){
				let that = this;
				let userinfo = uni.getStorageSync('userInfos');
				let params = {
					_id: id,
					user_id: userinfo._id,
					wallet_type: 2
				}
				uni.showModal({
					content:'确定删除吗?',
					async success(res) {
						if(res.confirm){
							let res = await api.uniCloudApi(api.publicFun.wallet,params);
							if(res.deleted){
								that.showToast('删除成功');
								that.loadData();
							}else {
								that.showToast(res.msg)
							}
						}
					}
				})
			},
			addCard(){
				uni.navigateTo({
					url:'newMoneyCard'
				})
			},
			showToast(msg){
				uni.showToast({
					icon:'none',
					title:msg
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.container{
		background-color: #F1F1F1;
		padding:10rpx 25rpx;
	}
	.content{
		margin: 20rpx 0;
		background-color: #FFFFFF;
		padding: 10rpx 45rpx;
		border-radius: 15rpx;
		display: flex;
		height: 120rpx;
		.left{
			width: 25%;
			height: 120rpx;
			line-height: 120rpx;
			text-align: left;
			.icon-zhifubao{
				font-size: 90rpx;
				color: #0000FF;
			}
			.icon-weixin{
				font-size: 75rpx;
				color: #00B26A;
			}
			.icon-yinhangka1{
				font-size: 75rpx;
				color: #3639ef;
			}
		}
		.center{
			width: 60%;
			height: 120rpx;
			.top{
				height: 60rpx;
				line-height: 60rpx;
			}
			.bottom{
				height: 60rpx;
				line-height: 60rpx;
			}
		}
		.right{
			width: 15%;
			height: 120rpx;
			line-height: 120rpx;
			text-align: right;
			.icon-shanchu{
				font-size: 40rpx;
				color: $uni-back-color;
			}
		}
	}
	.btn{
		position: absolute;
		bottom: 50rpx;
		width: 88%;
		button{
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: $uni-back-color;
			border-radius: 40rpx;
			/* #ifdef MP-ALIPAY */
			margin-left: 5%;
			/* #endif */
		}
	}
</style>
